<template>
  <div class="detail">
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text" style="fontSize: 15px">
            账单详情
          </span>
        </div>
      </template>
    </header-template-phone>
    <div class="main">
      <bill-board>
        <div class="billboard-content">
          <div class="item">
            <div class="title">充值</div>
            <div class="recharge statistics">
            <span><span>+</span>{{1234}}</span>
            
            </div>
          </div>
        </div>
      </bill-board>
      <div class="list-wrapper">
        <div class="list box-shadow">
          <order-item :width="90" :title="'用户名:'">
            <span>
              {{item.accountName}}
            </span>
          </order-item>
          <order-item :width="90" :title="'单号:'">
            <span>
              {{item.orderNo}}
            </span>
          </order-item>
          <order-item :width="90" :title="'交易时间:'">
            <span>
              {{item.time | formater}}
            </span>
          </order-item>
          <order-item :width="90" :title="'交易后余额:'">
            <span>
              {{item.balance}}
            </span>
          </order-item>
          <order-item :width="90" :title="'交易方式:'">
            <span>
              {{item.method}}
            </span>
          </order-item>
          <order-item :width="90" :title="'当前状态:'">
            <span style="color: #e02828;">
              {{item.status == 0 ? '支付成功' : '支付失败'}}
            </span>
          </order-item>
          <order-item :width="90" :title="'备注:'">
            <span>
              {{item.remarks}}
            </span>
          </order-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import OrderItem from '@/components/base/order-specification/order-item'
import BillBoard from '@/components/base/bill-board/bill-board'
import { formatDateYMD } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    HeaderTemplatePhone,
    HeaderBack,
    OrderItem,
    BillBoard
  },
  data() {
    return {
      item: {
        id: 1,
        orderNo: 'DDT90786534',
        accountName: 'vip8878',
        time: new Date().getTime() - 9 * 3600 * 1000,
        balance: 1689.21,
        status: 0,
        method: '系统后台充值',
        remarks: '第三方支付宝未到账'
      }
    }
  },
  methods: {
    back() {
      this.$emit('click')
    },
    dateFormatter(time) {
      return formatDateYMD(time)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px)
    .detail
      .main
        box-sizing border-box 
        padding-top 48px 
        .billboard-content 
          background $color-text-button
          .item 
            padding 20px 0
            .title 
              margin-bottom 10px
            .statistics
              span 
                display inline-block 
                color $color-theme-red
                font-size 18px
                font-weight 700
        .list-wrapper 
          margin-top 10px
          box-sizing border-box 
          padding 0 10px
          .list 
            background-color #fff
      .main >>> .bg-bar
        display none    
</style>